<template>
  <div id="home">
    <el-container>
      <base-header :activeIndex="activeIndex"></base-header>

      <router-view class="me-container" />

      <base-footer v-show="footerShow"></base-footer>
    </el-container>
  </div>
</template>

<script>
import BaseFooter from "@/components/BaseFooter";
import BaseHeader from "@/views/BaseHeader";

export default {
  name: "Home",
  data() {
    return {
      activeIndex: '/blog', // 初始化activeIndex为当前路由路径
      footerShow: true,
    };
  },
  components: {
    "base-header": BaseHeader,
    "base-footer": BaseFooter,
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.activeIndex = to.path;
    });
  },
  beforeRouteUpdate(to, from, next) {
    if (to.path == "/") {
      this.footerShow = true;
    } else {
      this.footerShow = false;
    }
    this.activeIndex = to.path;
    next();
  },
};
</script>

<style>
.me-container {
  margin: 100px auto 140px;
}
</style>
